<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'user_add.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 63%;
	color: #000;
}
/*input*/
.input_on {
	padding: 2px 8px 0pt 3px;
	height: 18px;
	border: 1px solid #999;
	background-color: #FFFFCC;
}

.input_off {
	padding: 2px 8px 0pt 3px;
	height: 18px;
	border: 1px solid #CCC;
	background-color: #FFF;
}

.input_move {
	padding: 2px 8px 0pt 3px;
	height: 18px;
	border: 1px solid #999;
	background-color: #FFFFCC;
}

.input_out { /*height:16px;默认高度*/
	padding: 2px 8px 0pt 3px;
	height: 18px;
	border: 1px solid #CCC;
	background-color: #FFF;
}
/*form*/
ul.input_test {
	margin: 20px auto 0 auto;
	width: 500px;
	list-style-type: none;
}

ul.input_test li {
	width: 500px;
	height: 22px;
	margin-bottom: 10px;
}

.input_test label {
	float: left;
	padding-right: 10px;
	width: 100px;
	line-height: 22px;
	text-align: right;
	font-size: 1.4em;
}

.input_test p {
	float: left;
	_margin-top: -1px;
}

.input_test span {
	float: left;
	padding-left: 10px;
	line-height: 22px;
	text-align: left;
	font-size: 1.2em;
	color: #999;
}
</style>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
 //首先要加载jquery库文件，因为这里只是给大家演示，所以我就不加载了。
 //下面为jquery代码
 $(function(){
     $("#user.user_name").blur(function(){//用户名文本框失去焦点触发验证事件
        if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证不能为空并且只能为英文或者数字或者下划线组成的２－１５个字符
        {
            $("#nameTip").html("用户名不能为空且只能为英文或者数字");
        }
        else
        {
            $("#nameTip").html("输入正确");
        }

     });

      $("#user.user_password").blur(function(){//密码文本框失去焦点触发验证事件
        if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证和上面一样
        {
            $("#pas1Tip").html("密码不能为空且只能为英文或者数字");
        }
        else
        {
            $("#pas1Tip").html("输入正确");
        }

     });
     $("#repassword").blur(function(){//用户名文本框失去焦点触发验证事件
        if(!$(this).val || $(this).val() != $("#user.user_password").val() )//只处验证和上面一样
        {
            $("#pas2Tip").html("密码为空或者和上面的密码不致");
        }
        else
        {
            $("#pas2Tip").html("输入正确");
        }

     });

})
 </script>
</head>
<body>
	<form action="userAction!addUser.action" method="post">

		<ul class="input_test">
			<li><label for="inp_name">用户名：</label>
				<p>
					<input id="user.user_name" class="input_out" name="user.user_name"
						type="text" onfocus="this.className='input_on';this.onmouseout=''"
						onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"
						onmousemove="this.className='input_move'"
						onmouseout="this.className='input_out'" />
				</p> <span>请输入您的用户名</span><span id="nameTip"></span></li>

			<li><label for="inp_web">密码：</label>
				<p>
					<input class="input_out" name="user.user_password" type="text"
						onfocus="this.className='input_on';this.onmouseout=''"
						onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"
						onmousemove="this.className='input_move'"
						onmouseout="this.className='input_out'" />
				</p> <span>请输入您的密码</span><span id="pas1Tip"></span></li>
			<li><label for="inp_web">密码：</label>
				<p>
					<input id="repassword" class="input_out" name="repassword" type="text"
						onfocus="this.className='input_on';this.onmouseout=''"
						onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"
						onmousemove="this.className='input_move'"
						onmouseout="this.className='input_out'" />
				</p> <span>请再次输入密码</span><span id="pas2Tip"></span></li>

			<li>
				<button type="submit">提交</button>
				<button type="reset">重置</button></li>
		</ul>

	</form>
</body>
</html>

